<template>
  <div class="ccc-bg-box padding-20">
    <div class="flex top-box">
      <div class="project-map-box">
        <!-- 地图 -->
        <assets-map :project-data="projectList" :project-key="currentProjectKey"></assets-map>
        <div class="flex justify-center align-center map-text-box">
          <div class="flex-column align-center justify-center margin-left-right-30 list-text-box">
            <div class="font-weight-bold font-size-28">{{ projectCityNum }}</div>
            <div class="font-size-16">城市</div>
          </div>
          <div class="split-line"></div>
          <div class="flex-column align-center justify-center margin-left-right-30 list-text-box">
            <div class="font-weight-bold font-size-28">{{ projectNum }}</div>
            <div class="font-size-16">项目</div>
          </div>
          <!-- <div class="split-line"></div>
          <div class="flex-column align-center justify-center margin-left-right-30 list-text-box cursor-pointer" @click="goAssetComparisonPage">
            <img :src="assetCom" class="asset-img">
            <div class="font-size-16">资产对比<i class="icon el-icon-arrow-right margin-left-5"></i></div>
          </div> -->
        </div>
      </div>
      <div class="flex-1 margin-right-30">
        <!-- 数据数字展示 -->
        <div class="flex justify-between align-center">
          <template v-for="item in topNumList">
            <div class="flex-column justify-center list-text-box" :key="item.keyName">
              <p class="color-666666 font-size-14">{{ item.typeName }}</p>
              <p class="font-size-24 font-weight-900">
                {{ topNumMap[item.keyName] }}
                <span v-if="item.keyName == 'buildingArea' || item.keyName == 'rentArea'">m²</span>
                <span v-if="item.keyName == 'useRate'">%</span>
              </p>
            </div>
            <div v-if="item.keyName == 'useRate'" class="split-line" :key="`${item.keyName}ss`"></div>
          </template>
        </div>

        <el-table ref="table" :data="projectList" style="width: 100%" :row-style="{ cursor: 'pointer' }" height="400"
          :border="false" header-row-class-name="table-header" :highlight-current-row="true"
          :current-row-key="currentProjectKey" row-key="primaryKey" @row-click="projectSelect">
          <el-table-column label="项目" align="center" prop="name"></el-table-column>
          <el-table-column label="建筑面积(m²)" align="center" prop="buildingArea" width="120"></el-table-column>
          <el-table-column label="CAD(m²)" align="center" prop="rentArea" width="120"></el-table-column>
          <el-table-column label="使用系数" align="center" prop="useRate"></el-table-column>
          <el-table-column label="商铺数" align="center" prop="shopNumber"></el-table-column>
          <el-table-column label="广告位" align="center" prop="adNumber"></el-table-column>
          <el-table-column label="停车位" align="center" prop="parkNumber"></el-table-column>
          <el-table-column label="签约品牌数" align="center" prop="brandNumber" width="100"></el-table-column>
          <el-table-column align="center" label="操作" prop="remark" width="80">
            <template slot-scope="scope">
              <el-button type="text" @click.stop="goOperationIndex(scope.row.primaryKey)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- <div class="margin-top-10">
      <assets-echart ref="assetsEcharts"></assets-echart>
    </div> -->
  </div>
</template>

<script>
import assetsEchart from './components/assetsEchart.vue';
import assetsMap from './components/assetsMap.vue';
import Api from '../../api/assetsMap';
import { getMenuList } from '@/api';
import { goOperationIndex } from '@/common/js/utils';
import { accAdd, accDiv } from '@/common/js/utils.js';

export default {
  components: {
    assetsMap,
    assetsEchart,
  },
  data() {
    return {
      topNumList: [
        { typeName: '建筑面积', keyName: 'buildingArea' },
        { typeName: 'CAD面积', keyName: 'rentArea' },
        { typeName: '使用系数', keyName: 'useRate' },
        { typeName: '商铺数', keyName: 'shopNumber' },
        { typeName: '广告位', keyName: 'adNumber' },
        { typeName: '停车位', keyName: 'parkNumber' },
        { typeName: '签约品牌', keyName: 'brandNumber' },
      ],
      assetCom: require("../../assets/imgs/assetCom.png"),
      topNumMap: {
        buildingArea: '',
        rentArea: '',
        useRate: '',
        shopNumber: '',
        adNumber: '',
        parkNumber: '',
        brandNumber: '',
      },
      projectCityNum: '',
      projectNum: '',
      projectList: [],
      currentProjectKey: '',
      goOperationIndex: goOperationIndex
    };
  },
  mounted() {
    this.getProjectList();
  },
  created() { },

  methods: {
    //数据源
    async getProjectList() {
      const { rows } = await Api.projectData({});
      // 统计
      let cityCodeMap = {};
      let cityCodeList = [];
      let buildingArea = 0;
      let rentArea = 0;
      let useRate = 0;
      let shopNumber = 0;
      let adNumber = 0;
      let parkNumber = 0;
      let brandNumber = 0;

      rows.forEach(item => {
        // 城市
        if (!cityCodeMap[item.cityCode]) {
          cityCodeMap[item.cityCode] = true;
          cityCodeList.push(item.cityCode);
        }

        buildingArea = item.buildingArea ? accAdd(buildingArea, item.buildingArea) : 0;
        rentArea = item.rentArea ? accAdd(item.rentArea, rentArea) : 0;
        // useRate = item.useRate ? accAdd(item.useRate,useRate) * 100 : 0;
        shopNumber = item.shopNumber ? accAdd(item.shopNumber, shopNumber) : 0;
        adNumber = item.adNumber ? accAdd(item.adNumber, adNumber) : 0;
        parkNumber = item.parkNumber ? accAdd(item.parkNumber, parkNumber) : 0;
        brandNumber = item.brandNumber ? accAdd(item.brandNumber, brandNumber) : 0;
      });

      useRate = (accDiv(rentArea, buildingArea) * 100).toFixed(2)

      this.projectList = rows || []

      this.projectCityNum = cityCodeList.length;
      this.projectNum = this.projectList.length;
      this.topNumMap = {
        buildingArea,
        rentArea,
        useRate,
        shopNumber,
        adNumber,
        parkNumber,
        brandNumber,
      };

      // 默认第一行高亮
      if (this.projectList.length) {
        this.currentProjectKey = this.projectList[0].primaryKey

        this.$nextTick(() => {
          this.$refs.table.setCurrentRow(this.$refs.table.data[0])
        })
      }
    },
    // 选中项目
    projectSelect(row, column, event) {
      goOperationIndex(row.primaryKey)
      // this.currentProjectKey = row.primaryKey
      // this.$nextTick(() => {
      //   this.$refs.table.setCurrentRow(row)
      // })
    },

    goAssetComparisonPage() {
      // this.$router.push({
      //   name:"asset-comparisohome",
      //   query:{
      //     headerName:"资产对比"
      //   }
      // })

      let pathUrl = {
        name: 'asset-comparisohome',
        query: {
          headerName: "资产对比",
        }
      };
      let { href } = this.$router.resolve(pathUrl);
      window.open(href);
    }
  },
};
</script>

<style lang="scss" scoped>
.ccc-bg-box {
  .asset-img {
    width: 20px;
    height: 20px;
    margin-top: 5px;
    margin-bottom: 8px;
    margin-left: -10px;
  }

  .top-box {
    background: #fff;
  }

  .project-map-box {
    width: 33%;
    height: 400px;
    margin-right: 30px;
  }

  .map-text-box {
    height: 80px;
  }

  .list-text-box {
    height: 80px;
  }

  .split-line {
    width: 1px;
    height: 30px;
    background: #cccccc;
  }

  ::v-deep.el-table thead tr th {
    background: #666666;
    border: none;

    div {
      color: #fff;
      border: none;
    }
  }

  ::v-deep.el-table tbody tr td {
    border: none;
    padding: 10px 0;
  }

  ::v-deep.el-table::before {
    height: 0;
  }

  ::v-deep.table-header .el-table__cell div {
    font-size: 14px;
  }
}
</style>
